<!-- 能耗损率分析 -->

<template>
  <div class="flex flex-col w-100% p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card-1 -->
    <div
      class="flex-1 flex flex-col mb-10px"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">石化基地能耗损率总览</span>

        <div class="flex items-center">
          <span class="mr-11px text-[#333] text-14px">选择时间</span>
          <el-date-picker
            v-model="formInline.region"
            type="daterange"
            range-separator="至"
            unlink-panels
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />

          <el-button type="primary" class="w-80px ml-50px rounded-15px" :icon="Search"
            >查询</el-button
          >
          <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh">重置</el-button>
        </div>
      </div>
      <div class="w-100% flex-1 flex flex-wrap justify-evenly content-center">
        <div
          class="flex justify-between items-center w-30% h-100px mb-15px pl-30px pr-30px box-border bg-[#FFF0B1] rounded-4px text-[#FF9900]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.5)"
        >
          <span class="text-24px font-400">园区能耗综合损率</span>
          <span class="text-63px font-400" style="font-family: CenturyGothic">13.2%</span>
        </div>

        <div
          class="flex justify-between items-center w-30% h-100px mb-15px pl-30px pr-30px box-border bg-[#E0E6FF] rounded-4px text-[#6566FF]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.5)"
        >
          <span class="text-24px font-400">用水损率</span>
          <span class="text-63px font-400" style="font-family: CenturyGothic">13.2%</span>
        </div>

        <div
          class="flex justify-between items-center w-30% h-100px mb-15px pl-30px pr-30px box-border bg-[#E7FFFB] rounded-4px text-[#00CD99]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.42)"
        >
          <span class="text-24px font-400">用电损率</span>
          <span class="text-63px font-400" style="font-family: CenturyGothic">13.2%</span>
        </div>

        <div
          class="flex justify-between items-center w-30% h-100px pl-30px pr-30px box-border bg-[#E9F2FA] rounded-4px text-[#7B94FF]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.5)"
        >
          <span class="text-24px font-400">蒸汽损率</span>
          <span class="text-63px font-400" style="font-family: CenturyGothic">13.2%</span>
        </div>

        <div
          class="flex justify-between items-center w-30% h-100px pl-30px pr-30px box-border bg-[#FFE7E7] rounded-4px text-[#FF6666]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.42)"
        >
          <span class="text-24px font-400">燃气损率</span>
          <span class="text-63px font-400" style="font-family: CenturyGothic">13.2%</span>
        </div>

        <div
          class="flex justify-between items-center w-30% h-100px pl-30px pr-30px box-border bg-[#E3E5E8] rounded-4px text-[#6D7A9A]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.42)"
        >
          <span class="text-24px font-400">用煤损率</span>
          <span class="text-63px font-400" style="font-family: CenturyGothic">13.2%</span>
        </div>
      </div>
    </div>

    <!-- card-2 -->
    <div
      class="flex-1 flex flex-col mb-10px"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">各类能源损率趋势分析</span>

        <div class="flex items-center">
          <span class="mr-11px text-[#333] text-14px">选择时间</span>
          <el-date-picker
            v-model="formInline.region"
            type="daterange"
            range-separator="至"
            unlink-panels
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
          <el-button type="primary" class="w-80px ml-50px rounded-15px" :icon="Search"
            >查询</el-button
          >
          <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh">重置</el-button>
        </div>
      </div>
      <div class="w-100% flex-1">
        <Echarts ref="nyslqsfxEchats"></Echarts>
      </div>
    </div>

    <!-- card-3 -->
    <div class="flex-1 flex flex-col" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">各企业能耗损率分析</span>

        <el-button type="primary" class="w-80px ml-50px rounded-15px" :icon="Download"
          >导出</el-button
        >
      </div>
      <div class="w-100%">
        <!--表格 -->
        <Table
          class="mt-20px"
          style="height: 200px"
          :table-columns="tableColumns"
          :table-data="tableData"
        >
          <template #actionColumn="{ row }">
            <div class="flex justify-center">
              <el-button link type="primary" @click="query">查看</el-button>
            </div>
          </template>
        </Table>

        <el-pagination
          class="justify-end m-10px mt-15px"
          layout="total, sizes, prev, pager, next"
          :total="tableData.length"
          background
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <Dialog :visible="dialogShow" title="企业能耗损率" width="1000px" @close="dialogShow = false">
    <el-form
      v-for="(formItem, formIndex) in nhslFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item :label="item.label">
            <el-input v-model="item.value" :type="item.type" :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </Dialog>
</template>

<script setup lang="ts">
import { Search, Refresh, Download } from '@element-plus/icons-vue'

const formInline = reactive({
  user: '',
  region: '',
})
/** 各类能源损率趋势分析 start */
const nyslqsfxDate = reactive(['2023-01-10 00:00:00', '2023-01-24 00:00:00'])
const nyslqsfxEchats = ref(null) as any

const chartOption = {
  grid: {
    top: 60,
    left: 60,
    right: 60,
    bottom: 30,
  },
  title: {
    text: '能耗损率/%',
    left: 'center',
    textStyle: {
      fontWeight: 'normal',
      color: '#333',
    },
  },
  xAxis: {
    type: 'category',
    data: [
      '2022-01',
      '2022-02',
      '2022-03',
      '2022-04',
      '2022-05',
      '2022-06',
      '2022-07',
      '2022-08',
      '2022-09',
      '2022-10',
      '2022-11',
      '2022-12',
    ],
  },
  yAxis: {
    type: 'value',
  },
  legend: {
    data: ['用电损耗率', '用水损耗率', '蒸汽损耗率', '燃气损耗率', '用煤损耗率'],
    left: 'left',
  },
  // ---  提示框 ----
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  series: [
    {
      name: '用电损耗率',
      type: 'line',
      itemStyle: {
        normal: {
          color: '#F39934',
          lineStyle: {
            color: '#F39934',
          },
        },
      },
      data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5],
    },
    {
      name: '用水损耗率',
      type: 'line',
      itemStyle: {
        normal: {
          color: '#3AB779',
          lineStyle: {
            color: '#3AB779',
          },
        },
      },
      data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
    },
    {
      name: '蒸汽损耗率',
      type: 'line',
      itemStyle: {
        normal: {
          color: '#8184FC',
          lineStyle: {
            color: '#8184FC',
          },
        },
      },
      data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3],
    },
    {
      name: '燃气损耗率',
      type: 'line',
      itemStyle: {
        normal: {
          color: '#1CB4FF',
          lineStyle: {
            color: '#1CB4FF',
          },
        },
      },
      data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
    },
    {
      name: '用煤损耗率',
      type: 'line',
      itemStyle: {
        normal: {
          color: '#0AFFFD',
          lineStyle: {
            color: '#0AFFFD',
          },
        },
      },
      data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
    },
  ],
}

onMounted(() => {
  nyslqsfxEchats.value.initEchat(chartOption)
})
/** 各类能源损率趋势分析 end */

// 定义列配置
const tableColumns = [
  {
    prop: 'id',
    label: '序号',
    width: '80',
  },
  {
    prop: 'qymc',
    label: '企业名称',
  },
  {
    prop: 'zhnhzl',
    label: '综合能耗总量',
  },
  {
    prop: 'zhnhsl',
    label: '综合能耗损率',
  },
  {
    prop: 'actions',
    label: '操作',
    width: '140',
    slotName: 'actionColumn',
    type: 'slot',
    align: 'center',
  },
]

const tableData = [
  {
    id: 1,
    qymc: '虹洋热电',
    zhnhzl: '8888万tce',
    zhnhsl: '12.2%',
  },
  {
    id: 2,
    qymc: '盛虹炼化',
    zhnhzl: '8888万tce',
    zhnhsl: '12.2%',
  },
  {
    id: 3,
    qymc: '斯尔邦石化',
    zhnhzl: '8888万tce',
    zhnhsl: '12.2%',
  },
  {
    id: 4,
    qymc: '连云港石化',
    zhnhzl: '8888万tce',
    zhnhsl: '12.2%',
  },
  {
    id: 5,
    qymc: '瑞恒',
    zhnhzl: '8888万tce',
    zhnhsl: '12.2%',
  },
]

//企业能耗损率弹窗信息
const dialogShow = ref(false)

const nhslFormList = [
  {
    formLabelWidth: '160px',
    formList: [
      {
        label: '企业名称',
        type: 'input',
        value: '盛虹炼化',
      },
      {
        label: '统计时间',
        type: 'input',
        value: '2022-12',
      },
      {
        label: '综合能耗总量',
        type: 'input',
        value: '8888万tce',
      },
      {
        label: '综合能耗损率',
        type: 'input',
        value: '12.2%',
      },
      {
        label: '用水总量',
        type: 'input',
        value: '550万t',
      },
      {
        label: '用水损率',
        type: 'input',
        value: '12.2%',
      },
      {
        label: '用电总量',
        type: 'input',
        value: '550万kWh',
      },
      {
        label: '用电损率',
        type: 'input',
        value: '12.2%',
      },
      {
        label: '蒸汽总量',
        type: 'input',
        value: '550万t',
      },
      {
        label: '蒸汽损率',
        type: 'input',
        value: '12.2%',
      },
      {
        label: '燃气总量',
        type: 'input',
        value: '550万t',
      },
      {
        label: '燃气损率',
        type: 'input',
        value: '12.2%',
      },
      {
        label: '用煤总量',
        type: 'input',
        value: '550万t',
      },
      {
        label: '用煤损率',
        type: 'input',
        value: '12.2%',
      },
    ],
  },
]

const query = () => {
  dialogShow.value = true
}
</script>

<style scoped></style>
